import React, { Component } from 'react';
/* 
    三种修正this的方式
    1.render函数中动态绑定this
    2.构造函数中修改this
     constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this)
    }
    3.使用箭头函数
*/
class App extends Component {
    /* 第二种通过构造函数 修改this */
    // constructor(props){
    //     super(props);
    //     this.handleClick = this.handleClick.bind(this)
    // }
    state ={
        msg:"🐂"
    }
    // handleClick () {
    //     //类函数 this 指向
    //     console.log(this)//undefined
    //     this.setState({
    //         msg:"🐏"
    //     })
    // }
    handleClick = (params) => {
        this.setState({
            msg:"🐍"
        })
    }
    render() {
        return (
            <div>
                {/*          第一种方法通过bind改变this      */}
                {/* <button onClick={this.handleClick.bind(this)}>+</button> */}
                <button onClick={this.handleClick}>+</button>
                <h1>{this.state.msg}</h1>
            </div>
        );
    }
}

export default App;
